<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         div{
             width:100px;
             height:100px;
             background-color:violet;
             margin:10px;
         }
         a:link{
            color:rgb(255, 17, 9);
        }
        a:visited{
            color:rgb(42, 19, 250);
        }
        a:hover{
            color:green;
            cursor:help;
        }
        a:active{
            color:rgb(255, 0, 242);
        }
        #four{
            background-color:teal;
        }
        .two{
            background-color:yellow;
        }
</style>
</head>
<body>
    1.CSS的选择器
      标签选择器：根据标签名称选择一类元素
          <div></div>
          <span></span>
      id选择器：通过id属性选择一个元素
          #value #代表id属性名，value为属性值
      类选择器：class
          .value
      普遍选择器：*：所有所有元素被选中
      后代选择器:>:选择当前元素的直接子元素
                空格：选择当前元素的所有后代元素，包括孙代元素
      兄弟选择器：+：选择当前元素之后的一个兄弟元素
                 ~：选择当前元素之后的所有兄弟元素
      属性选择器：根据元素的属性来选择一类元素
            [id]:选择当前页面中具有id属性的元素
            [class="one"]:选择当前页面中具有class属性并且属性值为one的
            [class~="one"]:选择当前页面具有class属性并且属性值之一为one的元素
            [class^="o"]:选择当前页面中具有class属性并且属性值以o开头的元素
            [class$="o"]:选择当前页面中具有class属性并且属性值以o结尾的元素
            [class*="o e"]:选择当前页面具有class属性并且属性值包含某些元素的元素
      多选择器：使用逗号隔开多个选择器
      组合选择器：将多个选择器组合到一起使用
            div#one:选择当前页面中所有的div标签并且选择div汇总id为one的元素
      伪类选择器：
            ：伪类名称，css已经起好的class属性名称
            :first-child--->标签中的第一个元素
            :last-child--->标签中最后一个元素
            :nth-child(number/odd->奇数/even-->偶数)---->选择标签中的第几个元素
 =========可以用于隔行变色
         和状态相关的：
           :hover：当鼠标悬停在某个元素上时
           :avtive:当鼠标按下时的状态
           :link:当前元素未被点击过的状态
           :visited:被访问过之后的状态
         注意书写顺序：link-->visited-->hover-->active
      伪元素选择器：
           ::first-letter:第一个字符
           ::first-line：第一行
           ::selection:被选择的文本
           ::before--->在当前子元素的文本之前，添加元素
                content:"text"/url(引入图片，图片最好处理好，因为是行内元素，不能进行代码修改你)
           ::after--->在当前子元素的文本之后，添加元素
    2.选择器的优先值：
         选择器的优先级：根据特性值进行比较，特性值越大，优先级越高
             style属性：1000
             id选择器：100
             类选择器/伪类选择器/属性选择器：10
             元素选择器/伪元素选择器：1
          !important:不计入特性值，优先级最高，不建议经常使用
    3.link和@import的区别
          1) 所属范围
             @import 是css的语法，只能导入样式
             link是html的标签，不仅可以加载样式，还可以定义rel属性
             rel="stylesheet"表示调用外部样式表
          2) 加载顺序
             页面加载的时候，link标签引入的css被同时加载
              @import引入的css在页面加载完毕后再被加载
          3) 兼容性
              @import需要兼容IE5+
              link标签，不存在兼容性问题
    4.a标签中文字最终颜色为green
    5.
    <a href="#one">百度一下</a>
    <div id="one" class="two"></div>
    <div class="one two"></div>
    <div class="two three"></div>
    <div id="four" class="one"></div>
    <div class="one three"></div>
</body>
</html>